import React from 'react';

import { Route } from 'react-router-dom';
import { TabBar } from 'antd-mobile';

import News from './News';
import HouseList from './HouseList';
import Index from './Index/index.jsx';
import Profile from './Profile';



import '../../assets/fonts/iconfont.css'
import './index.scss'


const pageItemList = [
    {
        title: '首页',
        key: 'ind',
        path: '/home',
        component: Index,
        exact: true
    }, {
        title: '找房',
        key: 'findHouse',
        path: '/home/list',
        component: HouseList
    }, {
        title: '资讯',
        key: 'infom',
        path: '/home/news',
        component: News
    }, {
        title: '我的',
        key: 'my',
        path: '/home/profile',
        component: Profile
    },
]



export default class Home extends React.Component {

    get selectedTabBar() {
        return this.props.location.pathname
    }

    render() {
        return (
            <div className='home'>
                {pageItemList.map(i => (
                    <Route {...i}></Route>
                ))}
                <TabBar
                    tintColor="#21b97a"
                    barTintColor="white"
                >
                    {pageItemList.map(i => (

                        <TabBar.Item
                            title={i.title}
                            key={i.key}
                            icon={<i className={`iconfont icon-${i.key}`} />}
                            selectedIcon={<i className={`iconfont icon-${i.key}`} />}
                            selected={this.selectedTabBar === i.path}
                            onPress={() => { this.props.history.push(i.path) }}
                        >
                        </TabBar.Item>
                    ))}
                </TabBar>


            </div>
        )
    }
}